<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      background-color: pink;
      color: red;
      /* inset内阴影是可选的 模糊半径 扩展半径 inset的阴影在内容之下，背景之上 */
      box-shadow: inset 10px 10px 10px 10px skyblue;
      background-image: url('./image/1.png');
    }
    /* 可以使用逗号分隔，构建3d的效果 */
    .box--3d {
      width: 200px;
      height: 200px;
      background-color: #000;
        box-shadow: 
            1px 1px #111, 
            2px 2px #111, 
            3px 3px #111, 
            4px 4px #111,
            5px 5px #111, 
            6px 6px #111, 
            7px 7px #111, 
            8px 8px #111, 
            9px 9px #111,
            10px 10px #111, 
            12px 12px #111, 
            13px 13px #111, 
            14px 14px #111,
            15px 15px #111, 
            16px 16px #111, 
            17px 17px #111, 
            18px 18px #111,
            19px 19px #111, 
            20px 20px #111;
    }
    /* 
      1. 外阴影时，该阴影就像是元素的边界框，是不透明的，假设阴影的半径是0，它的周长和边界框大小和形状是完全相同的，它被裁剪在元素内部
      2. 内阴影，在元素的内距框内绘制
      3. 难点：如何保证尖角和圆角的连续性
    */
  </style>
</head>
<body>
  <div class="box">123123</div>
  <div class="box--3d">123123</div>
</body>
</html>